<template>
  <div class="container" id="permission">
    <div style="margin-bottom:20px">
      <el-button
        type="primary"
        @click="addPermission"
        v-if="$util.btnShowAuthority('/systemMenu/add')"
        >新增资源</el-button
      >
    </div>
    <div>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :default-expand-all="false"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          v-for="(item, index) in permissionCol"
          :label="item.title"
          :key="index"
          :prop="item.dataIndex"
          :width="item.width"
          :formatter="formatter"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :enterable="false"
              content="修改"
              placement="top"
              v-if="$util.btnShowAuthority('/systemMenu/edit')"
            >
              <i class="el-icon-edit" @click="update(scope.row)"></i>
            </el-tooltip>
            <el-divider
              direction="vertical"
              v-if="
                $util.btnShowAuthority('/systemMenu/delete') &&
                  scope.row.router !== '/dashboard/Workplace'
              "
            ></el-divider>
            <el-tooltip
              class="item"
              effect="dark"
              :enterable="false"
              content="删除"
              placement="top"
              v-if="
                $util.btnShowAuthority('/systemMenu/delete') &&
                  scope.row.router !== '/dashboard/Workplace'
              "
            >
              <i
                class="el-icon-delete"
                @click="deletePermission(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="dialogName"
      :visible.sync="dialogVisible"
      @close="closeDia('ruleForm')"
    >
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-form-item
          label="资源名称"
          :label-width="formLabelWidth"
          prop="menuName"
        >
          <el-input
            v-model="form.menuName"
            autocomplete="off"
            maxlength="10"
            placeholder="请输入资源名称"
            @input="inputPY"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="资源编码"
          :label-width="formLabelWidth"
          prop="menuCode"
        >
          <el-input
            v-model="form.menuCode"
            autocomplete="off"
            placeholder="请输入资源编码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="资源类型"
          :label-width="formLabelWidth"
          prop="menuType"
        >
          <el-select
            v-model="form.menuType"
            placeholder="请选择资源类型"
            @change="changeType"
          >
            <el-option label="目录" value="DIR"></el-option>
            <el-option label="二级导航" value="MENU"></el-option>
            <el-option label="隐藏菜单" value="INNER_MENU"></el-option>
            <el-option label="按钮" value="BTN"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.menuType === 'MENU'"
          label="查询路由"
          :label-width="formLabelWidth"
          prop="queryRoute"
        >
          <el-input
            v-model="form.queryRoute"
            autocomplete="off"
            placeholder="请输入查询路由"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级资源" :label-width="formLabelWidth" prop="pid">
          <el-select
            v-model="form.pid"
            placeholder="请选择,若不选代表无父级资源"
          >
            <el-option
              :label="`${item.menuName}`"
              v-for="(item, index) in parentNav.filter(
                item => item.menuType === this.type
              )"
              :key="index"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="资源说明"
          :label-width="formLabelWidth"
          prop="remark"
        >
          <el-input
            v-model="form.remark"
            autocomplete="off"
            placeholder="请输入资源说明"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="资源图标"
          :label-width="formLabelWidth"
          prop="icon"
        >
          <el-input
            v-model="form.icon"
            autocomplete="off"
            placeholder="请输入资源图标"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="资源路径"
          :label-width="formLabelWidth"
          prop="router"
        >
          <el-input
            v-model="form.router"
            autocomplete="off"
            placeholder="请输入资源路径"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="排序序号"
          :label-width="formLabelWidth"
          prop="menuSort"
        >
          <el-input
            v-model="form.menuSort"
            autocomplete="off"
            placeholder="请输入排序序号"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDia('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="sureDia('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { permissionCol } from "./columns";
import serve from "@/api/setting";
import { toTree } from "@/utils/util";
import vPinyin from "./compoents/vur-py";
const PARENT_TYPE = {
  DIR: "",
  MENU: "DIR",
  INNER_MENU: "DIR",
  BTN: "MENU"
};
const MENU_TYPE = {
  DIR: "目录",
  MENU: "二级导航",
  INNER_MENU: "隐藏导航",
  BTN: "按钮"
};
export default {
  name: "Permission",
  data() {
    return {
      loading: true,
      permissionCol,
      tableData: [],
      dialogName: "新增资源",
      dialogVisible: false,
      parentNav: [],
      type: "",
      form: {
        menuName: "",
        menuCode: "",
        menuType: "",
        pid: "",
        remark: "",
        icon: "",
        router: "",
        menuSort: "",
        queryRoute: ""
      },
      rules: {
        menuName: [
          { required: true, message: "请输入资源名称", trigger: "blur" }
        ],
        menuType: [
          { required: true, message: "请选择资源类型", trigger: "blur" }
        ],
        router: [
          { required: true, message: "请输入资源路径", trigger: "blur" }
        ],
        menuSort: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      formLabelWidth: "120px"
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      const _t = this;
      this.loading = true;
      serve.getPermissions().then(res => {
        let data = res.data;
        data.forEach(item => {
          item.parentId = item.pid;
        });
        _t.parentNav = data.filter(item => item.menuType !== "BTN");
        _t.tableData = toTree(data);
        _t.loading = false;
      });
    },
    addPermission() {
      this.form = {
        menuName: "",
        menuCode: "",
        menuType: "",
        pid: "",
        remark: "",
        icon: "",
        router: "",
        menuSort: "",
        queryRoute: ""
      };
      this.dialogName = "新增资源";
      this.dialogVisible = true;
    },
    inputPY() {
      const pinYin = vPinyin.chineseToPinYin(this.form.menuName).toLowerCase();
      this.form.menuCode = pinYin;
    },
    changeType(value) {
      // this.permissionObj = this.permissionType(value);
      if (value) {
        this.type = PARENT_TYPE[value];
      } else {
        this.type = "";
      }
      if (value !== "MENU") {
        this.form.queryRoute = "";
      }
      console.log(this.type);
      console.log(
        this.parentNav
          .filter(item => item.menuType === this.type)
          .map(item => {
            return { name: item.menuName, type: item.menuType };
          })
      );
    },
    formatter(row, column, cellValue) {
      return MENU_TYPE[cellValue] ? MENU_TYPE[cellValue] : cellValue;
    },

    update(scope) {
      this.dialogName = "修改资源";
      this.dialogVisible = true;
      const {
        menuName,
        id,
        menuCode,
        menuType,
        pid,
        remark,
        icon,
        router,
        menuSort,
        queryRoute
      } = scope;
      this.changeType(menuType);
      this.form = {
        menuName,
        id,
        menuType,
        menuCode,
        pid: pid || "",
        remark,
        icon,
        router,
        menuSort,
        queryRoute
      };
    },
    sureDia(from) {
      const that = this;
      this.$refs[from].validate(valid => {
        if (valid) {
          if (this.form.menuType === "DIR") {
            this.form.pid = 0;
          }
          if (that.dialogName === "新增资源") {
            serve.permissionAdd(that.form).then(res => {
              if (res.code === 200) {
                that.dialogVisible = false;
                that.getData();
              }
            });
          } else {
            serve.permissionUpdate(that.form).then(res => {
              if (res.code === 200) {
                that.dialogVisible = false;
                that.getData();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    closeDia(from) {
      this.dialogVisible = false;
      this.$refs[from].clearValidate();
    },
    deletePermission(scope) {
      const _t = this;
      this.$confirm(
        "删除选中资源，子数据会一同删除, 是否继续?",
        `确认要删除${scope.menuName}吗？`,
        {
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        serve.permissionDelete({ id: scope.id }).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            _t.getData();
          }
        });
      });
    }
  }
};
</script>
<style lang="less">
#permission {
  .el-input__inner {
    width: 440px;
  }
}
</style>
<style>
#permission .el-input__inner {
  width: 440px;
}
</style>
